<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <el-dialog :modelValue="operatorSelectVisible" title="选择算子" width="800" @close="buttonClick('cancel')">
    <div class="box">
      <el-form size="small" inline :model="queryParams" :ref="operatorSelectForm" label-width="80px">
        <el-form-item label="算子名" prop="operatorName">
          <el-input v-model="queryParams.operatorName" clearable/>
        </el-form-item>
        <el-form-item label="算子实现" prop="algorithmRealize">
          <el-input v-model="queryParams.algorithmRealize" clearable/>
        </el-form-item>
        <el-form-item label="计算对象" prop="caculate">
          <el-cascader
            v-model="queryParams.caculate"
            collapse-tags="true"
            max-collapse-tags="1"
            :options="calculateObject"
            :props="caculateProps"
            clearable
            placeholder="请选择"
          />
        </el-form-item>
        <el-form-item style="margin-left: 80px">
          <el-button size="small" type="primary" icon="search" @click="buttonClick('search')">搜索</el-button>
          <el-button size="small" icon="Refresh" @click="buttonClick('reset')">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="page-style">
        <el-pagination
          :total="total"
          layout="prev, pager, next, jumper"
          :page-size="pagesize"
          :current-page="currentPage"
          @current-change="pageChange"
          @prev-click="pageChange"
          @next-click="pageChange"
        />
      </div>
      <div class="table-div">
        <el-table
          :data="tableData"
          tooltip-effect="dark myTooltips"
          size="mini"
          height="450px"
          highlight-current-row
          :header-cell-style="{ background: '#f8f8f9', color: '#606266' }"
          @current-change="currentChange"
        >
          <el-table-column
            v-for="(item, index) in title"
            :key="index"
            :formatter="item.formatData"
            :show-overflow-tooltip="true"
            :label="item.label"
            header-align="center"
            :prop="item.column_id"
          />
        </el-table>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="buttonClick('confirm')"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="jsx">
import {calculateObject} from "../algorithmLibrary.js";
import { getOperatorList } from '@/api/algorithmLibrary';

export default {
  props: {
    contextData: {
      type: Object,
      default: () => ({})
    },
    operatorSelectVisible:{
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    currentChange(row) {
      this.currentOperator = row;
    },
    buttonClick(id) {
      if (id === "search") {
        this.getList();
      } else if (id === "reset") {
        this.emptyFormData();
        this.getList();
      } else if (id === "cancel") {
        this.$emit("handle-event", { close: "closeDiv", parms: "operator-select-close" });
      } else if (id === "confirm") {
        this.$emit("handle-event", {
          close: "closeDiv",
          parms: "operator-select",
          data: this.currentOperator
        });
      }
    },
    // 前端分页
    pageChange(page) {
      this.queryParams.pageNum = page;
      this.currentPage = page;
      this.getList();
    },
    // 清空form值
    emptyFormData() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        operatorName: '',
        algorithmRealize: '',
        caculate: '',
        type: '',
        isAsc: 'descending'
      }
    },

    // cascader支持enter查询
    // 下拉框出现/隐藏事件
    visibleChange(visible, index = undefined) {
      if (visible == false && index !== undefined) {
        this.$refs.queryFormLayout.$children[index].$refs.input.focus();
      }
    },
    // 按键按下事件
    keydownEvent(e, index = undefined) {
      if (e.code == "Enter" && index !== undefined) {
        this.$refs.queryFormLayout.$children[index].dropDownVisible = false;
      }
    },

    // 级联字段解包：查询接口结构
    fieldUnpackForQuery(data) {
      let newObj = [];
      if (data.calculate_object !== undefined) {
        data.calculate_object.forEach(item => {
          // item:["SEA","Frame"] => {object_type: "SEA", object_name:"Frame"}
          newObj.push({ object_type: item[0], object_name: item[1] });
        });
        data.calculate_object = newObj;
      }
      return data;
    },
    // 级联字段打包
    fieldPack(data) {
      data.forEach(item => {
        // calculate_object
        const newObj = [];
        item.calculateObjects.forEach(objItem => {
          const temp = [];
          temp.push(objItem.objectType);
          temp.push(objItem.objectName);
          newObj.push(temp);
        });
        item.calculateObjects = newObj;
        // type 3个type均为必填项
        const typeArr = [];
        typeArr.push(item.applicationType);
        typeArr.push(item.materialType);
        typeArr.push(item.algorithmType);
        item.type = typeArr;
      });
      return data;
    },
    formatType(row) {
      const type = row.type.join(" / ");
      return type;
    },
    formatCalObj(row) {
      const calArr = [];
      row.calculateObjects.forEach(item => {
        const objItem = item.join(" / ");
        calArr.push(objItem);
      });
      return calArr.join(" , ");
    },

    // *******************************  接口  *****************************

    // 获取算子配置
    getList() {
      // 获取最新的搜索关键词
      if (this.contextData.typeObj) {
        this.queryParams.typeList=[];
        this.queryParams.typeList.push({applicationType:this.contextData.typeObj.application_type,
          materialType:this.contextData.typeObj.material_type,
          algorithmType:this.contextData.typeObj.algorithm_type
        })
      }
     if(this.queryParams.caculate && this.queryParams.caculate.length>0){
      this.queryParams.calculateObjects = this.queryParams.caculate.map((el) => {
        return { objectType: el[0], objectName: el[1] };
      });
     }else{
      this.queryParams.calculateObjects = [];
     }
      this.tableDataAll = [];
      this.tableData = [];
      getOperatorList(this.queryParams).then(res=>{
        // 添加分页
        this.tableDataAll = this.fieldPack(res.rows || []) ;
        this.total = res.total;
        this.tableData = this.tableDataAll.slice(0, this.pagesize);
      })
    }
  },
  data() {
    return {
      total: 0,
      pagesize: 10,
      currentPage: 1,
      operatorSelectForm:null,
      calculateObject:calculateObject,
      caculateProps:{multiple:true},
      tableData: [],
      tableDataAll: [], // 前端分页，缓存所有数据
      currentOperator: {}, // 当前选中的算子的详细信息
      queryButtonArray: [
        {
          id: "search",
          label: "查询",
          icon: "el-icon-search",
          buttonType: "primary"
        },
        {
          id: "reset",
          label: "重置",
          icon: "el-icon-refresh"
        }
      ],
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        operatorName: '',
        algorithmRealize: '',
        caculate: '',
        type: '',
        isAsc: 'descending'
      },
      // modal右下角按钮
      buttonConf: [
        {
          id: "cancel",
          label: "取消",
          buttonType: "fcdefault",
          icon: "el-icon-close"
        },
        {
          id: "confirm",
          label: "确定",
          buttonType: "primary",
          icon: "el-icon-check"
        }
      ],
      title: [
        {
          label: "算子名",
          column_id: "operatorName"
        },
        {
          label: "算子实现",
          column_id: "algorithmRealize"
        },
        {
          label: "计算对象",
          column_id: "calculate_object",
          formatData: this.formatCalObj
        },
        {
          label: "类型",
          column_id: "type",
          formatData: this.formatType
        }
      ]
    };
  }
};
</script>

<style  lang="less" scoped>
.query-form-dev {
  border: 1px solid #e2e2e2;
  padding: 15px;
  overflow: auto;
}
.page-style {
  padding-top: 8px;
  margin-left: -15px;
}
.table-div {
  margin-top: 10px;
  border: 1px solid #e2e2e2;
  border-bottom: 0px;
}
.box {
  padding: 10px;
}
.form-button {
  margin: 5px 0px 0px -15px;
}
/deep/.el-table__body tr.current-row > td {
  background-color: #b6dafb;
}
/deep/.el-cascader--mini {
  width: 100%;
}
/deep/.formlayout .formlayout-div {
  overflow: hidden; // 多选级联，input中选项tag较多转行后展开收起会滚动条闪动
}
</style>
